<template>
  <div class="integral">
    <div class="my-head">
      <x-header>积分商城</x-header>
      <div class="head">
        <span>{{userInfo.point || 0}}积分</span>
        <span>积分规则</span>
      </div>
    </div>
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:86px;min-height: 500px;" ref="my_scroller">
      <grid class="item-box" :show-lr-borders="false" :cols="2">
        <grid-item v-for="(item,i) in list" :key="i" @click.native="handleToDetail(item)" :label="item.name">
          <img slot="icon" :src="item.url" alt="">
          <div class="money">{{item.point}}积分</div>
        </grid-item>
      </grid>
    </scroller>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { getUnixTime } from '../../js/utils'
import {
  Actionsheet,
  XHeader,
  Grid,
  GridItem
} from 'vux';
const IntegralStore = namespace('mine');

@Component({
  components: {
    Actionsheet,
    XHeader,
    Grid,
    GridItem
  }
})
export default class Integral extends Vue {
  @IntegralStore.Action getIntergralList
  @IntegralStore.State intergralList
  currentPage = 1
  pageSize = 10
  list = []
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  noDataText = '--我也是有底线的--'
  infinite () {
    this.init()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  handleToDetail (item) {
    this.$router.push({
      name: 'integraldetail',
      params: {
        data: item
      }
    })
  }
  init () {
    const params = {
      createTime: getUnixTime(this.myTime),
      current: this.currentPage,
      pageSize: this.pageSize
    }
    this.getIntergralList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.intergralList
        this.list = this.list.concat(list)
      }
    })
  }
}
</script>
<style lang="less">
  .integral {
    // padding-top: 86px;
    .weui-grid {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .weui-grid__label {
        margin: 10px 0;
        width: 100%;
        span {
          font-size: 14px;
        }
      }
      .money {
        // font-size: 12px;
        color: red;
      }
    }
    .weui-grid__label {
      // font-size: 12px;
    }
    .weui-grid__icon {
      line-height: 30px;
      text-align: center;
      width: 100%;
      height: 60%;
    }
    .weui-cells {
      margin-top: 0;
    }
    .item-box {
      margin-top: 5px;
      background: #ffffff;
    }
    .head {
      height: 40px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
</style>


